<template>
  <div class="table-container">
    <el-button class="add-button" @click="dialogVisible = true">新增条目</el-button>

    <el-dialog
        v-model="dialogVisible"
        title="新增凭证条目"
        width="500"
    >
      <el-form :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item label="摘要">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="会计科目">
          <el-input v-model="form.subject" />
        </el-form-item>
        <el-form-item label="借方金额">
          <el-input v-model="form.debitValue" />
        </el-form-item>
        <el-form-item label="贷方金额">
          <el-input v-model="form.creditValue" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确认</el-button>
        </div>
      </template>
    </el-dialog>

    <table border="1">
      <tr>
        <th rowspan="2">摘要</th>
        <th rowspan="2">会计科目</th>
        <th colspan="11" class="debit-header">借方金额</th>
        <th colspan="11" class="credit-header">贷方金额</th>
      </tr>
      <tr>
        <td v-for="item in titleArray" :key="item">{{ item }}</td>
        <td v-for="item in titleArray" :key="item">{{ item }}</td>
      </tr>
      <tr class="dataRow" v-for="(item, index) in dataArray" :key="index">
        <td>{{ item.name }}</td>
        <td>{{ item.subject }}</td>
        <td v-for="(cell, cellIndex) in item.debit" :key="cellIndex" class="debit-cell">
          {{ cell }}
        </td>
        <td v-for="(cell, cellIndex) in item.credit" :key="cellIndex" class="credit-cell">
          {{ cell }}
        </td>
      </tr>
      <tr>
        <th colspan="2">合计:{{ sumStr }}</th>
        <td v-for="(cell, cellIndex) in debitSumArray" :key="cellIndex" class="debit-cell">
          {{ cell }}
        </td>
        <td v-for="(cell, cellIndex) in creditSumArray" :key="cellIndex" class="credit-cell">
          {{ cell }}
        </td>
      </tr>
    </table>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const dataIndex = ref(0)
const submitArray = ref([])

const dialogVisible = ref(false)
const titleArray = ref(['亿', '千', '百', '十', '万', '千', '百', '十', '元', '角', '分']);
const dataArray = ref([
  { name: '', subject: '', debit: ['', '', '', '', '', '', '', '', '', '', ''], credit: ['', '', '', '', '', '', '', '', '', '', ''] },
  { name: '', subject: '', debit: ['', '', '', '', '', '', '', '', '', '', ''], credit: ['', '', '', '', '', '', '', '', '', '', ''] },
  { name: '', subject: '', debit: ['', '', '', '', '', '', '', '', '', '', ''], credit: ['', '', '', '', '', '', '', '', '', '', ''] },
  { name: '', subject: '', debit: ['', '', '', '', '', '', '', '', '', '', ''], credit: ['', '', '', '', '', '', '', '', '', '', ''] }
]);

const debitSumArray = ref(['', '', '', '', '', '', '', '', '', '', ''])
const creditSumArray = ref(['', '', '', '', '', '', '', '', '', '', ''])

const form = ref({
  name: '',
  subject: '',
  debitValue: '',
  creditValue: ''
})

const numToChinese = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
const units = ['', '拾', '佰', '仟', '万', '拾万', '佰万', '仟万', '亿', '拾亿', '佰亿', '仟亿'];

const sumStr = ref('')

function integerToChinese(integer) {
  if (integer === '0') return numToChinese[0];
  let result = '';
  let zeroCount = 0;
  for (let i = 0; i < integer.length; i++) {
    const digit = parseInt(integer[i]);
    const position = integer.length - i - 1;
    const unit = units[position];
    if (digit === 0) {
      zeroCount++;
    } else {
      if (zeroCount > 0) {
        result += numToChinese[0];
      }
      zeroCount = 0;
      result += numToChinese[digit] + unit;
    }
  }
  // 处理结果中的连续单位问题（如“壹拾万”应改为“壹万”）
  result = result.replace(/壹拾/, '壹');
  // 去除末尾的零（如“壹万零”应改为“壹万”）
  result = result.replace(/零+$/, '');
  // 处理“万”和“亿”前面的零（如“零万”应改为“万”，“零亿”应特殊处理为“零”）
  result = result.replace(/(万|亿)零+$/, '$1');
  result = result.replace(/^零+万/, '万');
  result = result.replace(/^零+$/, numToChinese[0]);

  console.log(result)
  return result;
}

function decimalToChinese(decimal) {
  if (!decimal) return '';
  let result = '';
  for (let i = 0; i < decimal.length; i++) {
    const digit = parseInt(decimal[i]);
    const unit = i === 0 ? '角' : '分';
    result += numToChinese[digit] + unit;
  }
  // 去除末尾的“零分”
  result = result.replace(/零分$/, '');
  return result;
}

function numberToRMBChinese(num) {
  const [integerPart, decimalPart] = num.toString().split('.');
  const integerChinese = integerToChinese(integerPart);
  const decimalChinese = decimalToChinese(decimalPart);
  return integerChinese + (decimalChinese ? '整' + decimalChinese : '元整');
}

const submitForm = () => {
  if(submitArray.value.length>3){
    dataArray.value.push({ name: '', subject: '', debit: ['', '', '', '', '', '', '', '', '', '', ''], credit: ['', '', '', '', '', '', '', '', '', '', ''] })
  }

  dataArray.value[dataIndex.value].name = form.value.name
  dataArray.value[dataIndex.value].subject = form.value.subject

  if (form.value.debitValue != undefined && form.value.debitValue != '') {
    const intDebitValue = Number(form.value.debitValue) * 100;
    const debitValue = String(intDebitValue).split("")
    // 将 debitValue 数组补位为 11，前面位数用 '' 占位
    while (debitValue.length < 11) {
      debitValue.unshift('');
    }
    dataArray.value[dataIndex.value].debit = debitValue
  }

  if (form.value.creditValue != undefined && form.value.creditValue != '') {
    const intCreditValue = Number(form.value.creditValue) * 100;
    const creditValue = String(intCreditValue).split("")
    while (creditValue.length < 11) {
      creditValue.unshift('');
    }
    dataArray.value[dataIndex.value].credit = creditValue
  }

  submitArray.value.push(form.value)

  dataIndex.value = dataIndex.value + 1

  dialogVisible.value = false
  form.value = {
    name: '',
    subject: '',
    debitValue: '',
    creditValue: ''
  }

  // 计算合计
  let debitSum = 0
  let creditSum = 0
  for (let i = 0; i < submitArray.value.length; i++) {
    debitSum += Number(submitArray.value[i].debitValue)
    creditSum += Number(submitArray.value[i].creditValue)
  }

  if (debitSum != 0) {
    const intDebitSum = debitSum * 100;
    const intDebitSumValue = String(intDebitSum).split("")
    // 将 debitValue 数组补位为 11，前面位数用 '' 占位
    while (intDebitSumValue.length < 11) {
      intDebitSumValue.unshift('');
    }
    debitSumArray.value = intDebitSumValue

    // 将 intDebitSum 转为人民币大写
    sumStr.value = numberToRMBChinese(debitSum);
  }

  if (creditSum != 0) {
    const intCreditSum = creditSum * 100;
    const intCreditSumValue = String(intCreditSum).split("")
    while (intCreditSumValue.length < 11) {
      intCreditSumValue.unshift('');
    }
    creditSumArray.value = intCreditSumValue
  }
}
</script>

<style scoped>
.table-container {
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  align-items: center; /* 水平居中对齐 */
  margin-top: 20px; /* 可选：添加一些顶部间距 */
  font-family: Arial, sans-serif; /* 使用更现代的字体 */
}

.add-button {
  margin-bottom: 20px; /* 增加按钮和表格之间的间距 */
  background-color: #409EFF; /* 使用 Element Plus 的蓝色 */
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.add-button:hover {
  background-color: #66b1ff; /* 悬停时颜色变深 */
}

table {
  border-collapse: collapse; /* 合并边框 */
  width: 100%;
  max-width: 1200px;
  margin: 0 auto; /* 水平居中 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

th, td {
  border: 1px solid #ddd; /* 更浅的边框颜色 */
  padding: 12px; /* 增加内边距 */
  text-align: center; /* 居中文本 */
  height: 60px;
}

th {
  background-color: #f2f2f2; /* 浅灰色背景 */
  font-weight: bold; /* 加粗字体 */
  color: #333; /* 深色字体 */
  width: 300px;
}

.debit-header {
  background-color: #4CAF50; /* 绿色背景 */
  color: white; /* 白色字体 */
}

.debit-cell {
  background-color: #e8f5e9; /* 浅绿色背景 */
}

.credit-header {
  background-color: #f44336; /* 红色背景 */
  color: white; /* 白色字体 */
}

.credit-cell {
  background-color: #ffcdd2; /* 浅红色背景 */
}

.dataRow:nth-child(even) {
  background-color: #f9f9f9; /* 偶数行背景色 */
}

.dataRow:nth-child(odd) {
  background-color: #ffffff; /* 奇数行背景色 */
}

th[colspan="11"] {
  text-align: center; /* 居中文本 */
}

.el-dialog {
  border-radius: 10px; /* 圆角 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影 */
}

.el-form-item__label {
  font-weight: bold; /* 加粗标签字体 */
}

.el-input__inner {
  border-radius: 5px; /* 圆角 */
  border: 1px solid #ddd; /* 边框颜色 */
  padding: 10px; /* 内边距 */
}

.el-button {
  border-radius: 5px; /* 圆角 */
  padding: 10px 20px; /* 内边距 */
  transition: background-color 0.3s;
}

.el-button:hover {
  background-color: #66b1ff; /* 悬停时颜色变深 */
}
</style>
